<template>
  <div class="container">
    <el-row class="mb10">
      <el-col :span="16">
        <div class="flex">
          <el-select
            v-model="data.searchParams.projectYear"
            placeholder="年份"
            style="width: 10%"
            @change-value="changeValue"
            clearable
          >
            <el-option
              :label="item.itemText"
              :value="item.itemValue"
              :key="item.itemValue"
              v-for="item in options.yearList"
            />
          </el-select>
          <el-button class="ordinary" @click="search()">搜索</el-button>
        </div>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="ordinary" @click="kkSubmitAll()">提交领导审批</el-button>
      </el-col>
    </el-row>
    <div>
      <Table
        :loading="data.isLoading"
        :tableArr="data.allTableData"
        :pagination="data.page"
        :columns="data.columns"
        v-loading="loading"
        :total="data.page.total"
        @delectTable="delectIds"
        @currentChange="currentChange"
      >
        <template #operate="{ row }">
          <div v-if="userType === '1'">
            <el-button
              size="small"
              class="ordinary"
              @click="pass(row)"
              >通过</el-button
            >
            <el-button
              size="small"
              class="ordinary"
              @click="goDetail(row)"
              >查看</el-button
            >
            <el-button
              size="small"
              class="ordinary"
              @click="reject(row)"
              >驳回</el-button
            >
            <!-- <el-button
              size="small"
              class="ordinary"
              @click="kkSubmit(row)"
              v-limit="'KJSL:KJJL:KJCGJL:EDIT'"
              >提交</el-button
            > -->
          </div>
        </template>
      </Table>
    </div>
    <el-dialog
      v-model="visData.rejectShow"
      width="600px"
      :show-close="false"
      :close-on-click-modal="false"
      @closed="visClose"
      destroy-on-close
    >
      <template #title> 驳回 </template>

      <el-form :model="rejectform" label-width="120px">
        <el-form-item label="驳回原因：">
          <el-input type="textarea" v-model="rejectform.remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visClose">取消</el-button>
          <el-button type="primary" @click="sure">驳回</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="visData.passShow"
      width="600px"
      :show-close="false"
      :close-on-click-modal="false"
      @closed="visClose"
      destroy-on-close
    >
      <template #title> 同意 </template>

      <el-form :model="passform" label-width="120px">
        <el-form-item label="意见：">
          <el-input type="textarea" v-model="passform.remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visClose">取消</el-button>
          <el-button type="primary" @click="sure">通过</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="visData.kkShow"
      width="600px"
      :show-close="false"
      :close-on-click-modal="false"
      @closed="visClose"
      destroy-on-close
    >
      <template #title> 提交领导审批</template>
      <el-form :model="kkform" label-width="180px" v-loading="loading">
        <el-form-item label="年份：">
          <el-select v-model="kkform.year" placeholder="年份:" @change="changeYear" clearable>
            <el-option
              :label="item.itemText"
              :value="item.itemValue"
              :key="item.itemValue"
              v-for="item in options.yearList"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="奖励发放人员数量：">
          <el-input v-model="kkform.userCount" disabled></el-input>
          <span class="unit" style="margin-left: 10px; display: inline-block; width: 35px">
            人</span
          >
          <a style="margin-left: 10px" @click="goDetail(row)">查看详情</a>
        </el-form-item>
        <el-form-item label="奖励总金额：">
          <el-input v-model="kkform.bonusSum" disabled></el-input>
          <span class="unit" style="margin-left: 10px; display: inline-block; width: 35px">
            元</span
          >
          <a style="margin-left: 10px" @click="goDetail(row)">查看详情</a>
        </el-form-item>
        <el-form-item label="各单位发放总金额：">
          <el-input v-model="kkform.bonusOtherSum" disabled></el-input>
          <span class="unit" style="margin-left: 10px; display: inline-block; width: 35px">
            元</span
          >
          <a style="margin-left: 10px" @click="goDetail(row)">查看详情</a>
        </el-form-item>
        <el-form-item label="公司总部发放人员数量：">
          <el-input v-model="kkform.userCheccCount" disabled></el-input>
          <span class="unit" style="margin-left: 10px; display: inline-block; width: 35px">
            人</span
          >
          <a style="margin-left: 10px" @click="goDetail(row)">查看详情</a>
        </el-form-item>

        <el-form-item label="公司总部发放金额：">
          <el-input v-model="kkform.bonusCheccSum" disabled></el-input>
          <span class="unit" style="margin-left: 10px; display: inline-block; width: 35px">
            元</span
          >
          <a style="margin-left: 10px" @click="goDetail(row)">查看详情</a>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visClose">取消</el-button>
          <el-button type="primary" @click="kkCommit">提交审核</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="js">
import * as proxy from "@/constants/proxy"
import request from "@/utils/request"
import Api from '@/views/science/api/awards'
import Table from '@/views/science/components/table/table.vue'
import { Modals, tips } from '@/views/science/components/tips/tips'
import {computed, onMounted, reactive, ref} from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const defaultYear = new Date().getFullYear()
const userInfo = JSON.parse(localStorage.userInfo)
const userRole = userInfo.roleList
console.log(userRole)
// 用户类型 1领导 2科信提交人员
const userType = ref('1');
const visData = reactive({
  kkShow: false,
  rejectShow: false,
  passShow: false
})
const editRow = ref('')
const loading = ref(false)
const kkform = reactive({
  awardIds: '',
  year: defaultYear + '', // 年份
  userCount: '', //奖励发放人员数量
  bonusSum: '', // 奖励总金额：
  bonusOtherSum: '',//各单位发放总金额
  userCheccCount: '', // 公司总部发放人员数量
  bonusCheccSum: '', //公司总部发放金额
})
const rejectform = reactive({
   remark: ''
})
const passform = reactive({
   remark: ''
})
// 提交
function kkSubmit(row) {
    console.log(row)
}
// 查看
function forDetail(row) {
  console.log(row)
}
// 驳回
function reject(row) {
  editRow.value = row
  visData.rejectShow = true
}
// 通过
function pass(row) {
  editRow.value = row
  kkform.year = defaultYear + '', // 年份
  visData.passShow = true
}

function kkSubmitAll() {
  visData.kkShow = true
  getYearData()
}
function visClose() {
   visData.kkShow = false
   visData.passShow = false
   visData.rejectShow = false
}

let data = reactive({
  orgAllList: [],
  popupTreeProps: {
    label: 'name',
    children: 'children',
    value:'id',
    checkStrictly: true,
  },
  times: null,
  taskId: '',
  businessKey: '',
  dealVisible: false,
  isLoading: false,
  detail_loading: false,
  constructionName: '',
  processInstanceId: '',
  changeLogs: [],//变更记录
  addFlag: 0,
  flag1: null,
  flag2: null,
  status: 0, //0编辑，1审核
  dialogVisible: false,//弹窗
  page: { page: 1, limit: 10, total: 0 },
  ids: [],
  time: [],
  searchParams: {
    projectYear: defaultYear + '', // 年份
  },
  processInstanceIdtwo:'',
  bonus:'',
  allTableData: [],
  columns: [
    {
      key: 'year',
      width: 140,
      label: '年份',
    },
    {
      key: 'userCount',
      width: 140,
      // label: '项目名称',
      label: '奖励发放人员数量',
    },
    {
      key: 'bonusSum',
      width: 140,
      label: '奖励发放总金额（元）',
    },
    {
      key: 'bonusOtherSum',
      width: 140,
      label: '各单位发放总金额（元）',
    },
    {
      key: 'userCheccCount',
      width: 140,
      label: '公司总部发放人员数量',
    },
    {
      key: 'bonusCheccSum',
      width: 140,
      label: '公司总部发放金额',
      textColor: true
    },
    {
      key: 'status',
      label: '状态',
      textColor: true
    },
  ],

})
function getYearData() {
  loading.value = true
  Api.leaderApprovalt( {
    projectYear: kkform.year, // 年份 
    page: data.page.page,
    pageSize: data.page.limit,
  }).then(res=>{
    console.log(res.data.data,'res.data.data');
    let current = res.data.data.records[0]
    for(let key in kkform){
      kkform[key]= current[key]
    }
    kkform.awardIds = current.ids
    console.log(kkform,'kkform');
  })
}
function changeYear(info ) {
  console.log(kkform.year,info,'info')
  getYearData()
}


export default {
  components: {
    Table,
  },
  setup() {
    const store = useStore()
    const startDate = ref(null);  // 开始时间绑定值
    const endDate = ref(null);  // 结束时间绑定值
    const loading = ref(false)
    const activeName = ref('first')//tab切换
    const router = useRouter()
    const ruleForm = reactive({
      remark1: '',
    })
    console.log(store)
    const rules = reactive({
      remark1: [
        { required: true, message: '请输入备注', trigger: 'change', },
      ]
    })
  const options = reactive({
      projectnameList: computed(() => store.state.technologyStrength.KJSL_DECLARATION_TYPE),
      unitnameList: computed(() => store.state.technologyStrength.KJSL_APPLYING_FOR_AWARDS1),
      yearList: [
        { itemText: '2026年', itemValue: '2026' },
        { itemText: '2025年', itemValue: '2025' },
        { itemText: '2024年', itemValue: '2024' },
        { itemText: '2023年', itemValue: '2023' },
        { itemText: '2022年', itemValue: '2022' },
        { itemText: '2021年', itemValue: '2021' },
        { itemText: '2020年', itemValue: '2020' },
        { itemText: '2019年', itemValue: '2019' },
        { itemText: '2018年', itemValue: '2018' },
      ],//年份
      status: [
         { itemText: '全部', itemValue: '' },
         { itemText: '待审批', itemValue: '1' },
         { itemText: '审批通过', itemValue: '2' },
         { itemText: '驳回', itemValue: '3' },
      ]
    })
    const ruleFormRef = ref()



    const goDetail = () => {
      visData.kkShow = false
      router.push({
        path: "/science/award/bonusList",
      });
    }
    const getListData = () => { // 获取列表数据
      console.log('getListData')
      loading.value = true
      Api.leaderApprovalt( {
        ...data.searchParams,
         "status": "",
        page: data.page.page,
        pageSize: data.page.limit,
      }).then( res => {
        const resData = res.data.data
        data.page.total = resData.total
        
        loading.value = false
        resData.records.forEach(item=>{
          if(item.status==2){
            item.status = '审批通过'
          }else if(item.status==1){
            item.status = '待审批'
          }else if(item.status==8){
            item.status = '驳回'
          }
          
        })
        data.allTableData = resData.records
        
        console.log(data,'heargvzwsefdd')
      })

    }
    getListData()
    const kkCommit = async function () {
      let res = await  Api.leaderApproval({
        awardIds: kkform.awardIds
      })
      if(res) {
        tips('提交成功', 'success')
        getListData()
        visClose()
      }
    }
    // 点击查询按键，分页设置为当前页为1，
    const search = () => {
      console.log('搜索', data.searchParams);
      data.page.page = 1
      getListData()
    }
    function sure() {
      console.log(editRow.value,'editRow.value');
      if(visData.rejectShow) {
        if(rejectform.remark){
          Api.leaderCommit( {
            awardIds: editRow.value.ids,
            opinion: rejectform.remark,
            status: 0
          }).then( (res) => {
            rejectform.remark = ''
            visData.rejectShow = false
            if(res.data) {
              tips('操作成功', 'success')
              getListData()
            }
          })
        }else{
          tips('请填写驳回理由', 'warning')
        }
      }
      if(visData.passShow) {
        if(passform.remark) {
          Api.leaderCommit( {
            awardIds: editRow.value.ids,
            opinion: passform.remark,
            status: 1
          }).then( (res) => {
            passform.remark = ''
            visData.passShow = false
            if(res.data) {
              tips('操作成功', 'success')
              getListData()
            }
          })
        }else{
          tips('请填写通过意见', 'warning')
        }
      }
    }


    return {
      loading,
      sure,
      kkCommit,
      changeYear,
      userType,
      forDetail,
      pass,
      reject,
      kkSubmit,
      visData,
      kkSubmitAll,
      visClose,
      kkform,
      rejectform,
      passform,
      activeName,
      data,
      ruleForm,
      rules,
      ruleFormRef,
      options,
      // 列表
      getListData,
      startDate,
      endDate,
      close,
      search,
      goDetail
    }
  },
}
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}
.conUnitName {
  display: inline-block;
  margin-bottom: -10px;
  margin-right: 15px;
  padding-bottom: 10px;
  margin-top: -5px;
}
/deep/.el-dialog > .el-dialog__footer {
  position: relative;
  top: -10px;
}

:global(.el-dialog__body) {
  padding: 0;
}

.el-col {
  line-height: 40px;
}
.el-input--small .el-input__inner {
  //height: 42px !important;
  //line-height: 32px;
}
.el-form-item {
  .el-input {
    width: 100px;
    background-color: aliceblue;
  }

  .el-select {
    width: 100px;
  }
}

.custom-color {
  color: red !important;
  /* 确保优先级高于其他样式 */
}

.el-table th {
  background-color: #f0f0f0;
  /* 修改表头背景色 */
  color: #333;
  /* 修改表头文字颜色 */
}

/* .demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
} */

.open-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/deep/.el-dialog__body {
  display: block !important;
}

.mt15 {
  margin-top: 15px;
}

.mb10 {
  margin-bottom: 10px;
}

.tc {
  text-align: center;
}

.align-center {
  align-items: center;
}

.space-between {
  justify-content: space-between;
}

.mt20 {
  margin-top: 20px;
}

.flex {
  display: flex;
  //height: 42px ;
}
.unit {
  margin-right: 10px;
}
</style>
